<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<!-- <body>
	<div id="app">
	  <ol>
		<todo-item
		  v-for="item in list"
		  v-bind:todo="item"
		  v-bind:key="item.id"
		></todo-item>
	  </ol>
	</div>
		<script>
			Vue.component('todo-item', {
			  props: ['todo'],
			  template: '<li>{{ todo.text }}</li>'
			})

			var app = new Vue({
			  el: '#app',
			  data: {
				list: [
				  { id: 0, text: '蔬菜' },
				  { id: 1, text: '奶酪' },
				  { id: 2, text: '随便其它什么人吃的东西' }
				]
			  }
			})
		</script>
	</body> -->
	<!-- <body>
	    <div id="app">
			<input type="text" id="txt">
			<p id="show"></p>
		</div>
		<script>
			var obj = {}
			Object.defineProperty(obj, 'txt', {
				get: function () {
					return obj
				},
				set: function (newValue) {
					document.getElementById('txt').value = newValue
					document.getElementById('show').innerHTML = newValue
				}
			})
			document.addEventListener('keyup', function (e) {
				obj.txt = e.target.value
			})
		</script>
	</body> -->
	<body>
	    <div id="app">
			<label v-bind:style="[style]">{{message}}</label><input type="text" v-model='message'>
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
				style: {
					fontSize: '20px',
					color: '#09f',
					marginRight: '10px',
				},
					message: 'saff'
				}
			})
		</script>
	</body>
</html>
